<template>
  <div class="charts" ref="charts">
    <el-row :gutter="10">
      <el-col :span="12">
        <div class="grid-content">
          <dept-info :width="offsetWidth">></dept-info>
        </div>
        <div class="grid-content" style="margin-top:10px">
          <sku-count :width="offsetWidth">></sku-count>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-transparent">
          <order-aims></order-aims>
        </div>
      </el-col>
    </el-row>
    <v-Inventory></v-Inventory>
    <div class="name">
      <svg
        t="1597390040393"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8196"
        width="200"
        height="200"
      >
        <path
          d="M896 0a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128H128a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128zM298.666667 469.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v256a42.666667 42.666667 0 0 0 85.333333 0v-256a42.666667 42.666667 0 0 0-42.666666-42.666667z m426.666666 0a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 0 85.333333 0v-256a42.666667 42.666667 0 0 0-42.666667-42.666667z m-213.333333-170.666666a42.666667 42.666667 0 0 0-42.666667 42.666666v426.666667a42.666667 42.666667 0 0 0 85.333334 0V341.333333a42.666667 42.666667 0 0 0-42.666667-42.666666z"
          fill="#409eff"
          p-id="8197"
        />
      </svg>
      销售数据跟踪
      <i class="el-icon-search" @click="open = true" v-if="!open"></i>
      <i class="el-icon-circle-close" @click="open = false" v-else></i>
    </div>
    <el-form :model="formData" ref="formData" size="small" label-width="60px" v-if="open">
      <el-form-item label="BU" prop="buList">
        <BU
          :form="formData"
          formId="buList"
          :multiple="true"
          addSize="mini"
          @selectAll="Bu"
          @selectDel="Bu"
          size="small"
        ></BU>
      </el-form-item>
      <el-form-item label="系列" prop="series">
        <category
          ref="category"
          :form="formData"
          formId="series"
          formBU="buList"
          :multiple="true"
          @selectAll="Category"
          @selectDel="Category"
          addSize="mini"
          size="small"
        ></category>
      </el-form-item>
      <el-form-item label="型号" prop="modelNumbers">
        <product
          ref="product"
          formId="modelNumbers"
          formBU="buList"
          formCategory="series"
          :form="formData"
          :multiple="true"
          @selectAll="Product"
          @selectDel="Product"
          addSize="mini"
          size="small"
        ></product>
      </el-form-item>
      <el-form-item label="账号" prop="sellerIds">
        <el-select
          v-model="formData.sellerIds"
          multiple
          filterable
          collapse-tags
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in account"
            :key="item.sellerId"
            :label="item.sellerName"
            :value="item.sellerId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="站点" prop="sites">
        <el-select
          v-model="formData.sites"
          multiple
          filterable
          collapse-tags
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="item in countryList"
            :key="item.countryId"
            :label="item.alphaCode"
            :value="item.alphaCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="组别" prop="groups">
        <el-select
          v-model="formData.groups"
          multiple
          filterable
          collapse-tags
          clearable
          placeholder="请选择"
        >
          <el-option v-for="(item,index) in dataGroupList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运营" prop="userIds">
        <el-select
          v-model="formData.userIds"
          multiple
          filterable
          collapse-tags
          clearable
          placeholder="请选择"
        >
          <el-option
            v-for="(item,index) in dataOperatorList"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期" prop="timeType">
        <el-radio-group v-model="formData.timeType" @change="getTime">
          <el-radio-button label="w">周图</el-radio-button>
          <el-radio-button label="m">月图</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="0">
        <el-select
          v-model="formData.startTime"
          filterable
          @change="startTime"
          placeholder="请选择"
          style="width:115px"
        >
          <el-option
            v-for="item in timeList"
            :key="item.id"
            :label="item.time + formData.timeType"
            :value="item.time"
            :disabled="formData.endTime ? item.id > endtimeId : false"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0">
        <el-select
          v-model="formData.endTime"
          filterable
          @change="endtime"
          placeholder="请选择"
          style="width:115px"
        >
          <el-option
            v-for="item in timeList"
            :key="item.id"
            :label="item.time + formData.timeType"
            :value="item.time"
            :disabled="item.id < startTimeId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" icon="el-icon-search" @click="getSales">搜索</el-button>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button icon="el-icon-circle-close" @click="resetForm('formData')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="dataReport">
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <product-dimension :dataList="salesData.productDimension" :width="offsetWidth"></product-dimension>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <product-salesDto :dataList="salesData.productSales" :width="offsetWidth"></product-salesDto>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <target :dataList="salesData.target" :width="offsetWidth"></target>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <marketing :dataList="salesData.marketing" :width="offsetWidth"></marketing>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <ppc-dto :dataList="salesData.ppc" :width="offsetWidth"></ppc-dto>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content" v-loading="loading">
          <lp-dto :dataList="salesData.lp" :width="offsetWidth"></lp-dto>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import deptInfo from "./deptInfo";
import skuCount from "./skuCount";
import orderAims from "./orderAims";
import { AmazonAccount, Country } from "@/api/common";
import BU from "components/searchfor/bu";
import category from "components/searchfor/category";
import product from "components/searchfor/product";
import { Sales, Time, DataOperator, DataGroup } from "@/api/dashboard";
import elementResizeDetectorMaker from "element-resize-detector";
import productSalesDto from "./ProductSalesDto";
import productDimension from "./productDimension";
import target from "./target";
import marketing from "./marketing";
import ppcDto from "./ppcDto";
import lpDto from "./lpDto";
import vInventory from "./Inventory"

export default {
  components: {
    deptInfo,
    skuCount,
    productSalesDto,
    productDimension,
    target,
    marketing,
    ppcDto,
    lpDto,
    BU,
    category,
    product,
    orderAims,
    vInventory
  },
  data() {
    return {
      open: false,
      formData: {
        modelNumbers: [],
        series: [],
        buList: [],
        groups: [],
        userIds: [],
        status: [],
        endTime: "",
        startTime: "",
        timeType: "w",
      },
      offsetWidth: "",
      BULidt: [],
      account: [],
      categoryList: [],
      productList: [],
      salesData: {},
      countryList: [],
      dataOperatorList: [],
      dataGroupList: [],
      timeList: [],
      startTimeId: Number,
      endtimeId: Number,
      loading: true,
    };
  },
  created() {

    console.log("this.$route.query.productId ==",this.$route.query.productId)

    this.open = true
    if(this.$route.query.productId){
      this.formData.modelNumbers.push(Number(this.$route.query.productId))
      const product = { "productId" : Number(this.$route.query.productId), "productModelNumber" : this.$route.query.productModelNumber}
      this.productList.push(product)
      if(this.$route.query.productCategoryId){
        this.formData.series.push(Number(this.$route.query.productCategoryId))
        const productCategory = { "productCategoryId" : Number(this.$route.query.productCategoryId), "productCategory" : this.$route.query.productCategory}
        this.categoryList.push(productCategory)
      }
      if(this.$route.query.businessUnitId){
        this.formData.buList.push(Number(this.$route.query.businessUnitId))
        const bu = { "businessUnit" : this.$route.query.businessUnit, "businessUnitId" : Number(this.$route.query.businessUnitId)}
        this.BULidt.push(bu)
      }

    }
    this.getForm();
    this.getTime();
    this.getDataOperator();
    this.getDataGroup();






  },

  mounted() {
    const _this = this;
    const erd = elementResizeDetectorMaker();
    erd.listenTo(_this.$refs.charts, (element) => {
      _this.$nextTick(() => {
        setTimeout(() => {
          this.offsetWidth = element.offsetWidth / 2 - 20 + "px";
        }, 300);
      });
    });
  },
  methods: {
    getForm() {
      AmazonAccount().then((res) => {
        this.account = res.data.data.data;
      });
      Country().then((res) => {
        this.countryList = res.data.data.Country;
      });
    },
    Bu(list) {
      this.$refs.category.getCategory();
      this.$refs.product.getProduct();
      this.BULidt = list;
    },
    Category(list) {
      this.$refs.category.getCategory(true);
      this.$refs.product.getProduct();
      this.categoryList = list;
    },
    Product(list) {
      this.$refs.product.getProduct(true);
      this.productList = list;
    },
    getTime() {
      Time().then((res) => {
        let timeList = [];
        res.data.data.forEach((item, index) => {
          if (item.indexOf(this.formData.timeType.toUpperCase()) !== -1) {
            timeList.push({
              time: item.replace(this.formData.timeType.toUpperCase(), ""),
              id: index + 1,
            });
          }
        });
        if (this.formData.timeType == "w") {
          this.formData.startTime = timeList[timeList.length - 12].time;
          this.formData.endTime = timeList[timeList.length - 1].time;
        } else {
          this.formData.startTime = timeList[timeList.length - 6].time;
          this.formData.endTime = timeList[timeList.length - 1].time;
        }
        this.timeList = timeList;
        this.startTime(this.formData.startTime);
      });
    },
    startTime(time) {
      if (time) {
        this.startTimeId = this.yearsAndWeeksId(time);
      } else {
        this.startTimeId = Number;
      }
    },
    endtime(time) {
      if (time) {
        this.endtimeId = this.yearsAndWeeksId(time);
      } else {
        this.endtimeId = Number;
      }
    },
    yearsAndWeeksId(time) {
      this.getSales();
      return this.timeList.find((item) => time === item.time).id;
    },
    getDataOperator() {
      DataOperator().then((res) => {
        this.dataOperatorList = res.data.data;
      });
    },
    getDataGroup() {
      DataGroup().then((res) => {
        this.dataGroupList = res.data.data;
      });
    },
    getSales() {
      this.loading = true;
      const formData = JSON.parse(JSON.stringify(this.formData));
      formData.buList = this.getListName(
        "buList",
        this.BULidt,
        "businessUnitId",
        "businessUnit"
      );
      formData.series = this.getListName(
        "series",
        this.categoryList,
        "productCategoryId",
        "productCategory"
      );
      formData.modelNumbers = this.getListName(
        "modelNumbers",
        this.productList,
        "productId",
        "productModelNumber"
      );

      Sales(formData).then((res) => {
        this.loading = false;
        this.salesData = res.data.data;
      });
    },
    getListName(formName, list, id, name) {
      return list
        .filter(
          (item) => !this.formData[formName].every((el) => item[id] !== el)
        )
        .map((item) => item[name]);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.formData.startTime = this.timeList[this.timeList.length - 12].time;
      this.formData.endTime = this.timeList[this.timeList.length - 1].time;
      this.getSales();
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.charts {
  position: relative;
  background: #f1f1f1;
  padding: 1px;
  margin: 0;
}
.el-form {
  background: #ffffff;
  .el-form-item {
    display: inline-block;
    margin-bottom: 10px;
  }
}
.el-row {
  margin: 0;
}
.name {
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #000;
  font-weight: bold;
  background: #ffff;
  padding: 15px;
  svg {
    display: inline-block;
    vertical-align: top;
    height: 18px;
    width: auto;
  }
  i {
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
.el-col {
  .grid-content {
    position: relative;
    background: #ffffff;
    padding: 10px;
  }
  .bg-transparent {
    background: transparent;
    padding: 0;
  }
}

.dataReport {
  margin-top: 10px;
  .el-col {
    height: 370px;
    .grid-content {
      height: 360px;
    }
  }
}
</style>
